<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>单日记录</title>
    <!-- 字体 -->
    <link rel="stylesheet" href="./css/font-awesome.min.css">
    <!-- 初始化CSS -->
    <link rel="stylesheet" href="./css/init.css">
    <!-- head -->
    <link rel="stylesheet" href="./css/header.css">
    <!-- loading -->
    <link rel="stylesheet" href="./css/qiein-loading.css">
    <!-- 公共 -->
    <link rel="stylesheet" href="./css/common.css">
    <!-- 本页面 -->
    <link rel="stylesheet" href="css/day-record.css">
    <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/vue/2.1.10/vue.min.js"></script>
    <!-- layer -->
    <script src="./js/layer/layer.js"></script>
    <script src="./js/mock.js"></script>
    <script src="./js/laydate.js"></script>
</head>

<body>
    <div class="all-contain" id="qiein-app">
        <!-- 头部样式 -->
        <header class="qiein-head">
            <div class="qiein-logo">
                <img src="img/qiein-logo.png" alt="">
            </div>
            <!-- 头部导航 -->
            <div class="head-nav">
                单日记录<i class="fa fa-angle-down"></i>
                <div class="head-nav-ul-wrap">
                    <ul>
                        <li onclick="location.href='./index.html'">预约日历</li>
                        <li onclick="location.href='./customer-manager.html'">销售客户管理</li>
                        <li onclick="location.href='./operation-record.html'">操作记录</li>
                    </ul>
                </div>
            </div>
            <!-- 头部搜索 -->
            <div class="head-search">
                <div>
                    <i class="fa fa-search"></i>
                    <input type="text">
                </div>
            </div>
            <!-- 头部提示 -->
            <div class="head-prompt">
                <i class="fa fa-bell"></i>
                <span>1</span>
            </div>
            <div class="login-user">
                <span><i class="fa fa-user"></i></span>
                <div>超级管理员</div>
            </div>
        </header>
        <!-- 头部样式 end-->
        <div class="qiein-search">
            <ul>
                <li class="borderR paddingR-1x">
                    <div class="time-start-end marginR-1x floatL">
                        <input type="text" placeholder="时间" readonly id="date1">
                    </div>
                    <div class="select-style marginR-1x floatL cale-title">
                        <!-- 前一月 -->
                        <span @click="prevMonth()"><i class="fa fa-caret-left"></i></span>
                        <!-- 后一月 -->
                        <span @click="nextMonth()"><i class="fa fa-caret-right"></i></span>
                    </div>
                </li>
                <li class="paddingL-1x">
                    <div class="operation-ul-wrap">
                        <ul>
                            <li class="marginR-1x" id="add"><span><i class="fa fa-plus"></i></span><span>录入</span></li>
                            <li><span><i class="fa fa-refresh"></i></span><span>刷新</span></li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
        <!-- table表格开始 -->
        <div class="table-wrap" id="table-vue">
            <div id="table-thead" class="table-thead" @scroll="tableScroll(event)" ref="table-thead">
                <table class="table-style">
                    <!-- 表头的遍历（固定的表头） -->
                    <thead>
                        <tr>
                            <th v-for="(tableHead,index) in tableHeads">
                                <!-- 如果可排序 -->
                                <div v-if="tableHead.sortAble" :style="{width:tableHead._widthHead}">
                                    <span v-text="tableHead.text"></span>
                                    <i class="fa fa-angle-down" @click="sorting(index,tableHead.name,tableHead.asc)" :style="{transform:tableHead.asc?'':'rotate(180deg)'}"></i>
                                </div>
                                <!-- 不可排序 -->
                                <div v-else :style="{width:tableHead._widthHead}">
                                    <span v-text="tableHead.text"></span>
                                </div>
                            </th>
                        </tr>
                    </thead>
                </table>
            </div>
            <!-- table样式  开始 -->
            <div id="table-tbody" class="table-tbody" @scroll="tableScroll(event)" ref="table-tbody">
                <table class="table-style" id="table1">
                    <thead>
                        <!-- 表头的遍历(真实表头，实际是隐藏的) -->
                        <tr>
                            <th v-for="(tableHead,index) in tableHeads" :style="{width:tableHead._width}">
                                <span v-text="tableHead.text"></span>
                            </th>
                        </tr>
                    </thead>
                    <!-- 渲染外层 -->
                    <template v-for="datas in tableDatas">
                        <tbody>
                            <!--渲染内层  -->
                            <template v-for="(list,index) in datas.lists">
                                <!-- 如果是第一行则跨行 -->
                                <template v-if="index==0">
                                    <tr>
                                        <td :rowspan="datas.lists.length" v-text="datas[tableHeads[index].name]"></td>
                                        <!-- 遍历数据 -->
                                        <td v-for="li in list" v-text="li"></td>
                                    </tr>
                                </template>
                                <template v-else>
                                    <tr>
                                        <!-- 遍历数据 -->
                                        <td v-for="li in list" v-text="li"></td>
                                    </tr>
                                </template>
                            </template>
                        </tbody>
                    </template>
                    <!--渲染外层结束  -->
                </table>
            </div>
            <!-- table样式  结束 -->
        </div>
        <!-- 表格样式结束 -->
        <!-- 添加面板 -->
        <template id="addPanle">
            <div class="addPanle">
                <div class="add-card">
                    <table>
                        <tr>
                            <td class="label-td">
                                <label>预约时间</label>
                            </td>
                            <td>
                                <input type="text" id="yy-time" onclick="laydate({festival: true})">
                            </td>
                            <td class="label-td">
                                <label>预约时间段选择</label>
                            </td>
                            <td>
                                <select>
                                    <option>10:00-12:00</option>
                                    <option>12:00-14:00</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td class="label-td">
                                <label>预约人</label>
                            </td>
                            <td class=" borderR">
                                <select>
                                    <option>小李(15200015845)</option>
                                    <option>小王(18536547895)</option>
                                </select>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </template>
    </div>
</body>
<script>
"use strict";

function parseURL(url) {
    var url = url.split("?")[1];
    if (url == undefined) {
        return false;
    }
    var para = url.split("&");
    var len = para.length;
    var res = {};
    var arr = [];
    for (var i = 0; i < len; i++) {
        arr = para[i].split("=");
        res[arr[0]] = arr[1];
    }
    return res;
}
//alert(parseURL(location.href).time);

var searchTime = laydate({
    elem: '#date1',
    format: 'YYYY/MM/DD', // 分隔符可以任意定义，该例子表示只显示年月
    festival: true, //显示节日
    choose: function(datas) { //选择日期完毕的回调
        //alert('得到：' + datas);
    }
});

$(function() {
    $('#add').click(function(event) {
        layer.open({
            type: 1,
            area: ['800px','200px'],
            btn: ['确定', '取消'],
            scrollbar:false,
            content: document.querySelector("#addPanle").innerHTML
        });

    });
    $(document).click(function(event) {
        // 判断当前点击的元素是否是select或者select底下的元素，不是则隐藏所有已展开的select
        let judge1 = $(event.target).parents().hasClass('multiselect-style');
        if (!judge1) {
            $('.multiselect-style ul').slideUp(120);
            $('.multiselect-style>input').removeClass('multiselect-style-active');
            $('.multiselect-style>i').css('transform', 'rotate(0deg)');
        }

        let judge2 = $(event.target).parents().hasClass('select-style');
        if (!judge2) {
            $('.select-style ul').slideUp(120);
            //$('.multiselect-style>i').css('transform','rotate(0deg)');
        }

    });
    //自定义select样式的事件
    $('.select-style>input').on('click', function(event) {
        if ($(this).nextAll('ul').css('display') == 'block') {
            $(this).nextAll('ul').slideUp(120);
            return;
        }
        $('.select-style ul').slideUp(120);
        $(this).nextAll('ul').slideDown(120);
    });
    $('.select-style ul li').on('click', function(event) {
        $(this).parent('ul').slideUp(120);
        $(this).parent('ul').prev('input').val($(this).text());
    });
    //自定义multiselect样式的事件
    $('.multiselect-style>input,.multiselect-style>i').on('click', function(event) {
        if (event.target.tagName == 'INPUT') {
            if ($(this).nextAll('ul').css('display') == 'block') {
                $(this).nextAll('ul').slideUp(120);
                $(this).nextAll('i').css('transform', 'rotate(0deg)');
                $(this).removeClass('multiselect-style-active');
                return;
            };
        } else {
            if ($(this).nextAll('ul').css('display') == 'block') {
                $(this).nextAll('ul').slideUp(120);
                $(this).css('transform', 'rotate(0deg)');
                $(this).prevAll('input').removeClass('multiselect-style-active');
                return;
            };
        }
        //把其余的先关闭
        $('.multiselect-style>ul').slideUp(120);
        $('.multiselect-style>input').removeClass('multiselect-style-active');
        $('.multiselect-style>i').css('transform', 'rotate(0deg)');
        //设计当前点击的样式
        if (event.target.tagName == 'INPUT') {
            $(this).nextAll('ul').slideDown(120);
            $(this).nextAll('i').css('transform', 'rotate(180deg)');
            $(this).addClass('multiselect-style-active');
        } else {
            $(this).nextAll('ul').slideDown(120);
            $(this).css('transform', 'rotate(180deg)');
            $(this).prevAll('input').addClass('multiselect-style-active');
        }
    });

    $('.multiselect-style>ul li').on('click', function(event) {
        let _check = $(this).find('input[type="checkbox"]')[0].checked;
        $(this).find('input[type="checkbox"]')[0].checked = !_check;

    });
    $('.multiselect-style>ul>li>input').on('click', function(event) {
        let _check = this.checked;
        this.checked = !_check;
    });
});

var Random = Mock.Random;
//table相关配置
var tableVue = new Vue({
    el: '#table-vue',
    data: {
        ticking: false, //控制滚动锁
        //table表头
        tableHeads: [{
            id: '',
            name: 't1', //对应的字段名称
            text: '档期划分', //名字
            sortAble: false, //是否可排序
            filterAble: false, //是否可过滤
            asc: true, //排序规则
            _width: '', //真实表格的每个表头td的width
            _widthHead: '' //主要为了实现固定表头，和下面的隐藏真实表头的width相对应
        }, {
            id: '',
            name: 't2',
            text: '安排档期',
            sortAble: false,
            filterAble: false,
            asc: true,
            _width: '',
            _widthHead: ''
        }, {
            id: '',
            name: 't3',
            text: '实际到达时间',
            sortAble: false,
            filterAble: false,
            asc: true,
            _width: '',
            _widthHead: ''
        }, {
            id: '',
            name: 't4',
            text: '婚期',
            sortAble: false,
            filterAble: false,
            asc: true,
            _width: '',
            _widthHead: ''
        }, {
            id: '',
            name: 't5',
            text: '来源',
            sortAble: false,
            filterAble: false,
            asc: true,
            _width: '',
            _widthHead: ''
        }, {
            id: '',
            name: 't6',
            text: '顾客姓名',
            sortAble: false,
            filterAble: false,
            asc: true,
            _width: '',
            _widthHead: ''
        }, {
            id: '',
            name: 't7',
            text: '电话',
            sortAble: false,
            filterAble: false,
            asc: true,
            _width: '',
            _widthHead: ''
        }, {
            id: '',
            name: 't8',
            text: '分类',
            sortAble: false,
            filterAble: false,
            asc: true,
            _width: '',
            _widthHead: ''
        }, {
            id: '',
            name: 't9',
            text: '状态',
            sortAble: false,
            filterAble: false,
            asc: true,
            _width: '',
            _widthHead: ''
        }, {
            id: '',
            name: 't10',
            text: '类型',
            sortAble: false,
            filterAble: false,
            asc: true,
            _width: '',
            _widthHead: ''
        }, {
            id: '',
            name: 't11',
            text: '婚纱照套系',
            sortAble: false,
            filterAble: false,
            asc: true,
            _width: '',
            _widthHead: ''
        }, {
            id: '',
            name: 't12',
            text: '备注',
            sortAble: false,
            filterAble: false,
            asc: true,
            _width: '',
            _widthHead: ''
        }],
        tableDatas: [{
            t1: '10:00-12:00',
            lists: [{
                t2: Random.now('year'),
                t3: Random.now('year'),
                t4: Random.now('day'),
                t5: '线上',
                t6: Mock.mock('@cname()'),
                t7: '15258488888',
                t8: '试西服',
                t9: '完成',
                t10: '类型1',
                t11: '套系1',
                t12: '很满意哦'
            }, {
                t2: Random.now('year'),
                t3: Random.now('year'),
                t4: Random.now('day'),
                t5: '线上',
                t6: Mock.mock('@cname()'),
                t7: '15258488888',
                t8: '试西服',
                t9: '完成',
                t10: '类型1',
                t11: '套系1',
                t12: '很满意哦'
            }, {
                t2: Random.now('year'),
                t3: Random.now('year'),
                t4: Random.now('day'),
                t5: '线上',
                t6: Mock.mock('@cname()'),
                t7: '15258488888',
                t8: '试西服',
                t9: '完成',
                t10: '类型1',
                t11: '套系1',
                t12: '很满意哦'
            }, {
                t2: Random.now('year'),
                t3: Random.now('year'),
                t4: Random.now('day'),
                t5: '线上',
                t6: Mock.mock('@cname()'),
                t7: '15258488888',
                t8: '试西服',
                t9: '完成',
                t10: '类型1',
                t11: '套系1',
                t12: '很满意哦'
            }]
        }, {
            t1: '12:00-14:00',
            lists: [{
                t2: Random.now('year'),
                t3: Random.now('year'),
                t4: Random.now('day'),
                t5: '线上',
                t6: Mock.mock('@cname()'),
                t7: '15258488888',
                t8: '试西服',
                t9: '完成',
                t10: '类型1',
                t11: '套系1',
                t12: '很满意哦'
            }, {
                t2: Random.now('year'),
                t3: Random.now('year'),
                t4: Random.now('day'),
                t5: '线上',
                t6: Mock.mock('@cname()'),
                t7: '15258488888',
                t8: '试西服',
                t9: '完成',
                t10: '类型1',
                t11: '套系1',
                t12: '很满意哦'
            }, {
                t2: Random.now('year'),
                t3: Random.now('year'),
                t4: Random.now('day'),
                t5: '线上',
                t6: Mock.mock('@cname()'),
                t7: '15258488888',
                t8: '试西服',
                t9: '完成',
                t10: '类型1',
                t11: '套系1',
                t12: '很满意哦'
            }, {
                t2: Random.now('year'),
                t3: Random.now('year'),
                t4: Random.now('day'),
                t5: '线上',
                t6: Mock.mock('@cname()'),
                t7: '15258488888',
                t8: '试西服',
                t9: '完成',
                t10: '类型1',
                t11: '套系1',
                t12: '很满意哦'
            }, {
                t2: Random.now('year'),
                t3: Random.now('year'),
                t4: Random.now('day'),
                t5: '线上',
                t6: Mock.mock('@cname()'),
                t7: '15258488888',
                t8: '试西服',
                t9: '完成',
                t10: '类型1',
                t11: '套系1',
                t12: '很满意哦'
            }, {
                t2: Random.now('year'),
                t3: Random.now('year'),
                t4: Random.now('day'),
                t5: '线上',
                t6: Mock.mock('@cname()'),
                t7: '15258488888',
                t8: '试西服',
                t9: '完成',
                t10: '类型1',
                t11: '套系1',
                t12: '很满意哦'
            }]
        }, {
            t1: '12:00-14:00',
            lists: [{
                t2: Random.now('year'),
                t3: Random.now('year'),
                t4: Random.now('day'),
                t5: '线上',
                t6: Mock.mock('@cname()'),
                t7: '15258488888',
                t8: '试西服',
                t9: '完成',
                t10: '类型1',
                t11: '套系1',
                t12: '很满意哦'
            }, {
                t2: Random.now('year'),
                t3: Random.now('year'),
                t4: Random.now('day'),
                t5: '线上',
                t6: Mock.mock('@cname()'),
                t7: '15258488888',
                t8: '试西服',
                t9: '完成',
                t10: '类型1',
                t11: '套系1',
                t12: '很满意哦'
            }, {
                t2: Random.now('year'),
                t3: Random.now('year'),
                t4: Random.now('day'),
                t5: '线上',
                t6: Mock.mock('@cname()'),
                t7: '15258488888',
                t8: '试西服',
                t9: '完成',
                t10: '类型1',
                t11: '套系1',
                t12: '很满意哦'
            }, {
                t2: Random.now('year'),
                t3: Random.now('year'),
                t4: Random.now('day'),
                t5: '线上',
                t6: Mock.mock('@cname()'),
                t7: '15258488888',
                t8: '试西服',
                t9: '完成',
                t10: '类型1',
                t11: '套系1',
                t12: '很满意哦'
            }, {
                t2: Random.now('year'),
                t3: Random.now('year'),
                t4: Random.now('day'),
                t5: '线上',
                t6: Mock.mock('@cname()'),
                t7: '15258488888',
                t8: '试西服',
                t9: '完成',
                t10: '类型1',
                t11: '套系1',
                t12: '很满意哦'
            }, {
                t2: Random.now('year'),
                t3: Random.now('year'),
                t4: Random.now('day'),
                t5: '线上',
                t6: Mock.mock('@cname()'),
                t7: '15258488888',
                t8: '试西服',
                t9: '完成',
                t10: '类型1',
                t11: '套系1',
                t12: '很满意哦'
            }]
        }, {
            t1: '12:00-14:00',
            lists: [{
                t2: Random.now('year'),
                t3: Random.now('year'),
                t4: Random.now('day'),
                t5: '线上',
                t6: Mock.mock('@cname()'),
                t7: '15258488888',
                t8: '试西服',
                t9: '完成',
                t10: '类型1',
                t11: '套系1',
                t12: '很满意哦'
            }, {
                t2: Random.now('year'),
                t3: Random.now('year'),
                t4: Random.now('day'),
                t5: '线上',
                t6: Mock.mock('@cname()'),
                t7: '15258488888',
                t8: '试西服',
                t9: '完成',
                t10: '类型1',
                t11: '套系1',
                t12: '很满意哦'
            }, {
                t2: Random.now('year'),
                t3: Random.now('year'),
                t4: Random.now('day'),
                t5: '线上',
                t6: Mock.mock('@cname()'),
                t7: '15258488888',
                t8: '试西服',
                t9: '完成',
                t10: '类型1',
                t11: '套系1',
                t12: '很满意哦'
            }, {
                t2: Random.now('year'),
                t3: Random.now('year'),
                t4: Random.now('day'),
                t5: '线上',
                t6: Mock.mock('@cname()'),
                t7: '15258488888',
                t8: '试西服',
                t9: '完成',
                t10: '类型1',
                t11: '套系1',
                t12: '很满意哦'
            }, {
                t2: Random.now('year'),
                t3: Random.now('year'),
                t4: Random.now('day'),
                t5: '线上',
                t6: Mock.mock('@cname()'),
                t7: '15258488888',
                t8: '试西服',
                t9: '完成',
                t10: '类型1',
                t11: '套系1',
                t12: '很满意哦'
            }, {
                t2: Random.now('year'),
                t3: Random.now('year'),
                t4: Random.now('day'),
                t5: '线上',
                t6: Mock.mock('@cname()'),
                t7: '15258488888',
                t8: '试西服',
                t9: '完成',
                t10: '类型1',
                t11: '套系1',
                t12: '很满意哦'
            }]
        }]
    },
    created: function() {
        //页面创建时，请求后台
        this.getData();
    },
    mounted: function() {
        //页面载入完毕，开始固定表头
        this.creatFixHead();
        //监听resize事件
        window.onresize = () => {
            this.creatFixHead();
        }
    },
    updated: function() {
        //页面重新渲染，重新开始固定表头
        setTimeout(this.creatFixHead, 1000 / 60);
    },
    methods: {
        //创建固定表头
        creatFixHead: function() {
            // console.log(1);
            let _ths = this.$refs['table-tbody'].querySelectorAll('thead th');
            //遍历真实表头的每个th的宽度，让实际展示的固定表头的宽度和它相等
            for (var i = 0; i < _ths.length; i++) {
                // if(this.tableHeads[i]['_width']!='') continue;
                this.tableHeads[i]['_widthHead'] = _ths.item(i).scrollWidth + 'px';
                //console.log(this.tableHeads[i]['_widthHead']);
                // this.tableHeads[i]['_width'] = _ths.item(i).offsetWidth + 'px';
            }
        },
        //表格滚动事件
        tableScroll: function(e) {
            if (!this.ticking) {
                //requestAnimationFrame ,当滚动时，保持固定频率使用滚动函数
                requestAnimationFrame(this.tableBodyScrollDo);
                this.ticking = true;
            }
        },
        tableHeadScrollDo: function() {
            this.$refs['table-tbody'].scrollLeft = this.$refs['table-thead'].scrollLeft;
            this.ticking = false;
        },
        tableBodyScrollDo: function() {
            this.$refs['table-thead'].scrollLeft = this.$refs['table-tbody'].scrollLeft;
            this.ticking = false;
        },
        getData: function() {
            //获取数据

        },
        sorting: function(index, name, asc) {
            //排序
            if (asc) {
                alert(name + '排序为正序');
            } else {
                alert(name + '排序为倒序');
            }
            this.tableHeads[index].asc = !asc;
        }
    }
});
</script>

</html>
